<template>
  <MovieCard :movie="movie" :buyTicket="buyTicket" />
  <!--内容-->
  <section>
    <!--内容左侧-->
    <div class="section-left">
      <ul>
        <li><a href="">介绍</a></li>
        <li><a href="">演职人员</a></li>
        <li><a href="">奖项</a></li>
        <li><a href="">图集</a></li>
      </ul>
      <div>
        <h2>剧情简介</h2>

        <p class="txt">{{ movie.movieDes }}</p>
      </div>
      <ul class="txt-1">
        <li>演职人员</li>
        <li><a href="">全部 &gt</a></li>
      </ul>
      <ul class="txt-2">
        <li>导演</li>
        <li>演员</li>
      </ul>
      <div class="section-left-1">
        <ul>
          <li>
            <!--<p>导演</p>-->
            <a href="">
              <img src="/img/d0714ed6f9891eac6a83b23bb0b7e71231849.jpg" alt=""
            /></a>

            <a href=""><p>林超贤</p></a>
          </li>
          <li>
            <!--<p>演员</p>-->
            <a href=""
              ><img src="/img/a0b634cec6de4c327689c9ac6efa8a3033556.jpg" alt=""
            /></a>
            <a href="">
              <p>张韩雨</p>

              <p>饰：高岗</p></a
            >
          </li>
          <li>
            <a href="">
              <img
                src="/img/61e9efefee490126e91247fd2eb3297968030.jpg"
                alt=""
              />
            </a>
            <a href="">
              <p>彭于晏</p>

              <p>饰：方兴武</p>
            </a>
          </li>
          <li>
            <a href="">
              <img
                src="/img/cee75bec3660351ca1beb3d9d300b94b53219.jpg"
                alt=""
              />
            </a>
            <a href="">
              <p>冯文娟</p>

              <p>饰：郭冰</p>
            </a>
          </li>
          <li>
            <a href="">
              <img
                src="/img/e897b055ec71671275dae3bcb1d4c01580799.jpg"
                alt=""
              />
            </a>
            <a href="">
              <p>吴旭东</p>

              <p>饰：特警队长</p>
            </a>
          </li>
        </ul>
      </div>
      <div class="section-left-2">
        <ul class="txt-1">
          <li>图集</li>
          <li><a href="">全部 &gt</a></li>
        </ul>
        <div>
          <a href=""
            ><img src="/img/b8ed75583749bd604bd06a0b4b266d9d1993820.jpg" alt=""
          /></a>
          <ul>
            <li>
              <a href=""
                ><img
                  src="/img/a5d7ea4e2279c53ab00c8ba9aa1d6a6d552911.jpg"
                  alt=""
              /></a>
            </li>
            <li class="aaa">
              <a href=""
                ><img
                  src="/img/a5d7ea4e2279c53ab00c8ba9aa1d6a6d552911.jpg"
                  alt=""
              /></a>
            </li>
          </ul>
          <ul>
            <li>
              <a href=""
                ><img
                  src="/img/a5d7ea4e2279c53ab00c8ba9aa1d6a6d552911.jpg"
                  alt=""
              /></a>
            </li>
            <li>
              <a href=""
                ><img
                  src="/img/a5d7ea4e2279c53ab00c8ba9aa1d6a6d552911.jpg"
                  alt=""
              /></a>
            </li>
          </ul>
        </div>
      </div>
      <div class="section-left-3">
        <ul class="txt-1">
          <li>热门短评</li>
          <li class="duanping"><a href="">写短评</a></li>
        </ul>
        <div>
          <ul>
            <li>
              <a href=""
                ><img
                  src="/img/610bd1d6daddffca084a9d45f8a24fcc11575.jpg"
                  alt=""
              /></a>
              <img src="/img/v4.png" alt="" />
            </li>
          </ul>
          <ul>
            <li>yufujin</li>
            <li class="txt-3">
              09-30 <img src="/img/star_icon01.png" alt="" />
            </li>
          </ul>
          <ul>
            <li class="txt-4">
              <a href=""><img src="/img/icon_08.png" alt="" /> 12058</a>
            </li>
          </ul>
        </div>
        <p>
          太好看了，难得的动作片，作品都是经典。为什么这么好看的电影还没有爵迹高，为什么这么好看的电影还l>爵迹高，战狼才是良心超棒的动作片
        </p>

        <div>
          <ul>
            <li>
              <a href=""
                ><img
                  src="/img/610bd1d6daddffca084a9d45f8a24fcc11575.jpg"
                  alt=""
              /></a>
              <img src="/img/v4.png" alt="" />
            </li>
          </ul>
          <ul>
            <li>yufujin</li>
            <li class="txt-3">
              09-30 <img src="/img/star_icon01.png" alt="" />
            </li>
          </ul>
          <ul>
            <li class="txt-4">
              <a href=""><img src="/img/icon_08.png" alt="" /> 12058</a>
            </li>
          </ul>
        </div>
        <p>
          太好看了，难得的动作片，作品都是经典。为什么这么好看的电影还没有爵迹高，为什么这么好看的电影还l>爵迹高，战狼才是良心超棒的动作片
        </p>

        <div>
          <ul>
            <li>
              <a href=""
                ><img
                  src="/img/610bd1d6daddffca084a9d45f8a24fcc11575.jpg"
                  alt=""
              /></a>
              <img src="/img/v4.png" alt="" />
            </li>
          </ul>
          <ul>
            <li>yufujin</li>
            <li class="txt-3">
              09-30 <img src="/img/star_icon01.png" alt="" />
            </li>
          </ul>
          <ul>
            <li class="txt-4">
              <a href=""><img src="/img/icon_08.png" alt="" /> 12058</a>
            </li>
          </ul>
        </div>
        <p>
          太好看了，难得的动作片，作品都是经典。为什么这么好看的电影还没有爵迹高，为什么这么好看的电影还l>爵迹高，战狼才是良心超棒的动作片
        </p>

        <div>
          <ul>
            <li>
              <a href=""
                ><img
                  src="/img/610bd1d6daddffca084a9d45f8a24fcc11575.jpg"
                  alt=""
              /></a>
              <img src="/img/v4.png" alt="" />
            </li>
          </ul>
          <ul>
            <li>yufujin</li>
            <li class="txt-3">
              09-30 <img src="/img/star_icon01.png" alt="" />
            </li>
          </ul>
          <ul>
            <li class="txt-4">
              <a href=""><img src="/img/icon_08.png" alt="" /> 12058</a>
            </li>
          </ul>
        </div>
        <p>
          太好看了，难得的动作片，作品都是经典。为什么这么好看的电影还没有爵迹高，为什么这么好看的电影还l>爵迹高，战狼才是良心超棒的动作片
        </p>

        <div>
          <ul>
            <li>
              <a href=""
                ><img
                  src="/img/610bd1d6daddffca084a9d45f8a24fcc11575.jpg"
                  alt=""
              /></a>
              <img src="/img/v4.png" alt="" />
            </li>
          </ul>
          <ul>
            <li>yufujin</li>
            <li class="txt-3">
              09-30 <img src="/img/star_icon01.png" alt="" />
            </li>
          </ul>
          <ul>
            <li class="txt-4">
              <a href=""><img src="/img/icon_08.png" alt="" /> 12058</a>
            </li>
          </ul>
        </div>
        <p>
          太好看了，难得的动作片，作品都是经典。为什么这么好看的电影还没有爵迹高，为什么这么好看的电影还l>爵迹高，战狼才是良心超棒的动作片
        </p>

        <div>
          <ul>
            <li>
              <a href=""
                ><img
                  src="/img/610bd1d6daddffca084a9d45f8a24fcc11575.jpg"
                  alt=""
              /></a>
              <img src="/img/v4.png" alt="" />
            </li>
          </ul>
          <ul>
            <li>yufujin</li>
            <li class="txt-3">
              09-30 <img src="/img/star_icon01.png" alt="" />
            </li>
          </ul>
          <ul>
            <li class="txt-4">
              <a href=""><img src="/img/icon_08.png" alt="" /> 12058</a>
            </li>
          </ul>
        </div>
        <p>
          太好看了，难得的动作片，作品都是经典。为什么这么好看的电影还没有爵迹高，为什么这么好看的电影还l>爵迹高，战狼才是良心超棒的动作片
        </p>

        <div>
          <ul>
            <li>
              <a href=""
                ><img
                  src="/img/610bd1d6daddffca084a9d45f8a24fcc11575.jpg"
                  alt=""
              /></a>
              <img src="/img/v4.png" alt="" />
            </li>
          </ul>
          <ul>
            <li>yufujin</li>
            <li class="txt-3">
              09-30 <img src="/img/star_icon01.png" alt="" />
            </li>
          </ul>
          <ul>
            <li class="txt-4">
              <a href=""><img src="/img/icon_08.png" alt="" /> 12058</a>
            </li>
          </ul>
        </div>
        <p>
          太好看了，难得的动作片，作品都是经典。为什么这么好看的电影还没有爵迹高，为什么这么好看的电影还l>爵迹高，战狼才是良心超棒的动作片
        </p>

        <div>
          <ul>
            <li>
              <a href=""
                ><img
                  src="/img/610bd1d6daddffca084a9d45f8a24fcc11575.jpg"
                  alt=""
              /></a>
              <img src="/img/v4.png" alt="" />
            </li>
          </ul>
          <ul>
            <li>yufujin</li>
            <li class="txt-3">
              09-30 <img src="/img/star_icon01.png" alt="" />
            </li>
          </ul>
          <ul>
            <li class="txt-4">
              <a href=""><img src="/img/icon_08.png" alt="" /> 12058</a>
            </li>
          </ul>
        </div>
        <p>
          太好看了，难得的动作片，作品都是经典。为什么这么好看的电影还没有爵迹高，为什么这么好看的电影还l>爵迹高，战狼才是良心超棒的动作片
        </p>

        <div>
          <ul>
            <li>
              <a href=""
                ><img
                  src="/img/610bd1d6daddffca084a9d45f8a24fcc11575.jpg"
                  alt=""
              /></a>
              <img src="/img/v4.png" alt="" />
            </li>
          </ul>
          <ul>
            <li>yufujin</li>
            <li class="txt-3">
              09-30 <img src="/img/star_icon01.png" alt="" />
            </li>
          </ul>
          <ul>
            <li class="txt-4">
              <a href=""><img src="/img/icon_08.png" alt="" /> 12058</a>
            </li>
          </ul>
        </div>
        <p>
          太好看了，难得的动作片，作品都是经典。为什么这么好看的电影还没有爵迹高，为什么这么好看的电影还l>爵迹高，战狼才是良心超棒的动作片
        </p>
      </div>
    </div>
    <!--内容右侧-->
    <div class="section-right">
      <h2>相关资讯</h2>
      <div>
        <ul>
          <li>
            <a href=""
              ><img
                src="/img/5fe50b41d4d99a3e26b5ebd8464d519f272743.png"
                alt=""
            /></a>
          </li>
        </ul>
        <ul>
          <li><a href="">《战狼》 上映20天票房突破50亿大关</a></li>
          <li>
            猫眼电影 <img src="/img/icon_05.png" alt="" />21145
            <img src="/img/icon10.png" alt="" /> 111
          </li>
        </ul>
      </div>

      <div>
        <ul>
          <li>
            <a href=""
              ><img
                src="/img/5fe50b41d4d99a3e26b5ebd8464d519f272743.png"
                alt=""
            /></a>
          </li>
        </ul>
        <ul>
          <li><a href="">《战狼》 上映20天票房突破50亿大关</a></li>
          <li>
            猫眼电影 <img src="/img/icon_05.png" alt="" />21145
            <img src="/img/icon10.png" alt="" /> 111
          </li>
        </ul>
      </div>

      <div>
        <ul>
          <li>
            <a href=""
              ><img
                src="/img/5fe50b41d4d99a3e26b5ebd8464d519f272743.png"
                alt=""
            /></a>
          </li>
        </ul>
        <ul>
          <li><a href="">《战狼》 上映20天票房突破50亿大关</a></li>
          <li>
            猫眼电影 <img src="/img/icon_05.png" alt="" />21145
            <img src="/img/icon10.png" alt="" /> 111
          </li>
        </ul>
      </div>

      <h2>相关电影</h2>
      <ul>
        <li>
          <img src="/img/02ac72c0e8ee2987f7662ad921a2acc7999433.jpg" alt="" />

          <p><a href="">战狼2</a></p>

          <p>8. <span>9</span></p>
        </li>
        <li>
          <img src="/img/2d38a7c91ed866af1a08adbee28ffa8a157736.jpg" alt="" />

          <p><a href="">狂兽</a></p>

          <p>8. <span>3</span></p>
        </li>
        <li>
          <img src="/img/2bad4d79ed1d2ca6768ec6d6bdd97c5e588735.jpg" alt="" />

          <p><a href="">龙之战</a></p>

          <p>8. <span>0</span></p>
        </li>
      </ul>

      <ul>
        <li>
          <img src="/img/02ac72c0e8ee2987f7662ad921a2acc7999433.jpg" alt="" />

          <p><a href="">战狼2</a></p>

          <p>8. <span>9</span></p>
        </li>
        <li>
          <img src="/img/2d38a7c91ed866af1a08adbee28ffa8a157736.jpg" alt="" />

          <p><a href="">狂兽</a></p>

          <p>8. <span>3</span></p>
        </li>
        <li>
          <img src="/img/2bad4d79ed1d2ca6768ec6d6bdd97c5e588735.jpg" alt="" />

          <p><a href="">龙之战</a></p>

          <p>8. <span>0</span></p>
        </li>
      </ul>
    </div>
  </section>
</template>

<script setup>
import MovieCard from "./MovieCard/MovieCard.vue";
import { onBeforeMount, ref, onMounted } from "vue";
import { getMovieDetail } from "./api/index";
import { useRoute } from "vue-router";
import router from "../../router";

let movieId = ref(null);
let movie = ref({ imgUrl: "" });
const route = useRoute();

const getMovieById = async (id) => {
  if (!id) return;
  try {
    movie.value = await getMovieDetail(id);
  } catch (error) {
    console.error("Failed to fetch movie:", error);
    // 可以设置 movie.value 为一个错误对象或空对象
    movie.value = null;
  }
};
let id = movieId.value;
const buyTicket = () => {
  router.push(`/cinema/${movieId.value}`);
};

onMounted(() => {
  movieId.value = route.params.id;
  if (movieId.value) {
    getMovieById(movieId.value);
  }
});
</script>

<style scoped>
a {
  text-decoration: none;
}

/*����*/
section {
  width: 1000px;
  margin: 70px auto 0;
  display: flex;
  justify-content: space-between;
}
.section-left {
  width: 600px;
}
.section-left > ul:nth-child(1) {
  display: flex;
  border-bottom: 2px solid #e2e2e2;
}
.section-left > ul:nth-child(1) > li:not(:nth-child(1)) {
  padding-left: 20px;
}
.section-left > ul:nth-child(1) {
  padding-bottom: 10px;
}

.section-left > ul:nth-child(1) > li > a {
  color: #46433f;
  font-size: 14px;
  padding-bottom: 10px;
}
.section-left > ul:nth-child(1) > li:nth-last-child(2) > a {
  color: #c6c3cd;
}
.section-left > ul:nth-child(1) > li > a:hover {
  color: #df2e2e;
  border-bottom: 2px solid #df2e2e;
}
/*������*/
h2 {
  color: #46433f;
  font-size: 14px;
  padding-left: 5px;
  margin: 26px 0;
  border-left: 3px solid #df2e2e;
}
.txt {
  font-size: 12px;
}
/*}��ְ��Ա*/
.txt-1 {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}
.txt-1 > li:first-child {
  color: #46433f;
  font-size: 14px;
  padding-left: 5px;
  margin-top: 50px;
  border-left: 3px solid #df2e2e;
}
.txt-1 > li:last-child {
  margin-top: 50px;
}
.txt-1 > li > a {
  color: #c6c3cd;
  font-size: 14px;
}
.txt-1 > li > a:hover {
  color: #df2e2e;
}

.section-left-1 > ul {
  display: flex;
  justify-content: space-between;
}
.section-left-1 > ul > li > a > img {
  width: 110px;
  border: 2px solid white;
  padding-bottom: 8px;
}
.section-left-1 > ul > li > a > img:hover {
  border: 2px solid #3a305a;
  box-shadow: 4px 4px 5px #898989;
}
.section-left-1 > ul > li {
  text-align: center;
}
.section-left-1 > ul > li > a > p:nth-child(1) {
  font-size: 14px;
  color: #46433f;
}
.section-left-1 > ul > li > a > p:hover {
  color: #1c0046;
}
.section-left-1 > ul > li > a > p:nth-child(2) {
  font-size: 12px;
  color: #c6c3cd;
}
.txt-2 {
  display: flex;
  font-size: 14px;
  margin: 15px 0 10px;
  color: #46433f;
}
.txt-2 > li:nth-child(1) {
  margin-right: 95px;
}
/*ͼ��*/
.section-left-2 > div > a > img {
  width: 381px;
  opacity: 0.5;
}
.section-left-2 > div > a > img:hover {
  opacity: 1;
}
.section-left-2 > div > ul > li > a > img {
  width: 102px;
  opacity: 0.5;
}
.section-left-2 > div > ul > li > a > img:hover {
  opacity: 1;
}
.section-left-2 > div {
  display: flex;
  margin-top: 15px;
}
.section-left-2 > div > ul:nth-child(2) {
  border-left: 8px solid white;
  border-right: 8px solid white;
}
.section-left-2 > div > ul > li:nth-child(2) {
  border-top: 7px solid white;
}
/*д����00*/
.duanping > a {
  border: 1px solid #c6c3cd;
  border-radius: 30%;
  padding: 3px;
}
.duanping > a:hover {
  border: 1px solid #df2e2e;
}
.section-left-3 > div {
  display: flex;
  margin-top: 20px;
}
.section-left-3 > div > ul:nth-child(2) {
  margin-left: 20px;
}
.section-left-3 > div > ul:nth-child(2) {
  flex-grow: 1;
}
.section-left-3 > div > ul:nth-child(1) > li {
  position: relative;
}
.section-left-3 > div > ul:nth-child(1) > li > img:nth-child(2) {
  position: absolute;
  top: 30px;
  right: 0;
}
.section-left-3 > div > ul:nth-child(1) > li > a > img:hover {
  border-radius: 50%;
}
.section-left-3 > div > ul > li {
  font-size: 14px;
}
.section-left-3 > p {
  margin-left: 70px;
  font-size: 12px;
  color: #282628;
  padding-bottom: 30px;
  margin-bottom: 30px;
  border-bottom: 1px solid #c6c3cd;
}
.txt-3 {
  color: #c6c3cd;
}
.txt-3 > img {
  width: 80px;
  vertical-align: baseline;
}

.txt-4 > a {
  color: #c6c3cd;
}
.txt-4 {
  padding-top: 10px;
}
.txt-4 > a:hover {
  color: red;
}
.txt-4 > a > img {
  vertical-align: baseline;
}
/*�ұ�����*/
.section-right {
  width: 320px;
}
.section-right > div {
  display: flex;
  justify-content: space-between;
}
.section-right > div > ul > li > a {
  font-size: 14px;
  color: #46433f;
}
.section-right > div > ul > li > a:hover {
  font-size: 14px;
  color: #df2e2e;
  font-weight: 700;
  text-shadow: 1px 1px 1px black;
}
.section-right > div > ul > li {
  font-size: 12px;
  padding-bottom: 30px;
  color: #c6c3cd;
}
.section-right > div > ul > li > a > img {
  margin-right: 10px;
  border: 2px solid white;
}
.section-right > div > ul > li > a > img:hover {
  border: 2px solid #931f02;
  box-shadow: 4px 4px 5px rgba(98, 20, 20, 0.89);
}
/*��ص�Ӱ*/
.section-right > ul > li > img {
  width: 100px;
  margin-bottom: 10px;
  border: 2px solid white;
}
.section-right > ul > li > img:hover {
  border: 2px solid #931f02;
  box-shadow: 4px 4px 5px rgba(98, 20, 20, 0.89);
}
.section-right > ul {
  display: flex;
  justify-content: space-between;
  text-align: center;
  margin-top: 15px;
}
.section-right > ul > li > p > a {
  font-size: 14px;
  color: #282628;
}
.section-right > ul > li > p > a:hover {
  font-size: 14px;
  color: #df2e2e;
  font-weight: 700;
  text-shadow: 1px 1px 1px black;
}
.section-right > ul > li > p:nth-child(3) {
  color: #e4c602;
  margin-top: 12px;
}
.section-right > ul > li > p > span {
  font-size: 12px;
  color: #e4c602;
}
/*�ײ�*/
footer {
  width: 100%;
  background: #282628;
}
footer > p {
  font-size: 12px;
  text-align: center;
  line-height: 18px;
}
footer > p:first-child {
  padding-top: 50px;
}
footer > p:last-child {
  padding-bottom: 50px;
}
</style>